/**
 * OMS商品弹框
 * 使用于销售单新增编辑页的商品选择
 */
import PopupSelection from '../../../el/ItemComponent/PopupSelection';
import React from 'react';
import requests from '@/utils/request';
import { ElNotification } from '@/components/el';
import { ElSearchTableColumns } from '@/components/el/ElSearchTable';
import { ElFormProps } from '@/components/el/ElForm';
import { asserts } from '@/utils';
interface Props {
  value?: any;
  onChange?: Function;
  params?: any;
  [index: string]: any;
}
interface State {
  popupSelection: any;
}

const getTableSearchFormItems: ElFormProps = {
  items: [
    {
      title: '商品',
      name: 'keyCode',
      span: 6,
      formOption: {
        type: '$input',
        props: { placeholder: '请输入商品编号/名称' }
      }
    }
    // {
    //   title: '规格',
    //   name: 'itemSpec',
    //   span: 6,
    //   formOption: {
    //     type: '$input',
    //     props: { placeholder: '请输入规格' }
    //   }
    // },
    // {
    //   title: '类型',
    //   name: 'itemType',
    //   span: 6,
    //   formOption: {
    //     type: '$udc',
    //     props: {
    //       placeholder: '请选择商品类型',
    //       prefixStr: '/yst-system',
    //       domain: 'ITM',
    //       udc: 'ITEM_TYPE'

    //     }
    //   }
    // },
    // {
    //   title: '品类',
    //   name: 'itemCateName',
    //   span: 6,
    //   formOption: {
    //     type: '$support-category-cascader',
    //     props: { placeholder: '请选择商品品类' }
    //   }
    // },
    // {
    //   title: '品牌',
    //   name: 'brand',
    //   span: 6,
    //   formOption: {
    //     type: '$input',
    //     props: { placeholder: '请输入品牌编号/名称' }
    //   }
    // },
    // {
    //   title: '生产商',
    //   name: 'name4',
    //   span: 6,
    //   formOption: {
    //     type: '$input',
    //     props: { placeholder: '请输入生产商' }
    //   }
    // }
  ]
};
const modalTableColumns = (): Array<ElSearchTableColumns> => [
  {
    title: '编号',
    width: 140,
    dataIndex: 'itemCode',
    align: 'left'
  },
  {
    title: '名称',
    width: 160,
    dataIndex: 'itemName',
    align: 'left'
  },
  {
    title: '规格',
    width: 240,
    dataIndex: 'itemSpec',
    align: 'left'
  },
  {
    title: '类型',
    width: 100,
    dataIndex: 'itemTypeName',
    align: 'center'
  },
  {
    title: '一件代发',
    dataIndex: 'allocTypeName',
    width: 120,
    align: 'center'
  },
  {
    title: '供应商',
    dataIndex: 'suppName',
    width: 180
  },
  {
    title: '品类',
    width: 100,
    dataIndex: 'itemCateName',
    align: 'left'
  },
  {
    title: '品牌',
    width: 100,
    dataIndex: 'brandName',
    align: 'center'
  },
  // {
  //   title: '生产商',
  //   width: 160,
  //   ellipsis: true,
  //   dataIndex: 'i', //后端暂时不知对应字段
  //   align: 'center'
  // },
  {
    title: '主单位',
    width: 100,
    align: 'center',
    dataIndex: 'uomName'
  }
];

const columns = (): Array<ElSearchTableColumns> => [
  {
    title: '编号',
    width: 140,
    dataIndex: 'itemCode',
    align: 'left'
  },
  {
    title: '名称',
    width: 160,
    dataIndex: 'itemName',
    align: 'left'
  },
  {
    title: '规格',
    width: 100,
    dataIndex: 'itemSpec'
  }
];
// 在此处组装所有的数据
class ItemPopupSelection extends React.Component<Props, State> {
  static defaultProps = {
    params: {}
  };
  constructor(props) {
    super(props);
    this.state = {
      popupSelection: null // 通过ref获取inputValue   popupSelection.state.inputValue
    };
  }

  /**
   * 获取组件的ref
   * @param ref
   */
  onRef = (ref) => {
    this.setState({
      popupSelection: ref
    });
  };

  /**
   * 分页请求
   * @param param searchtable的参数
   * @param params 父级组件传入的参数
   * @returns
   */
  request = (param, params) => {
    if (this.props?.getbasicFormValueFunction) {
      const { basicFormValue } = this.props?.getbasicFormValueFunction();
      if (asserts.isExist(basicFormValue?.currCode)) {
        params = {
          ...params,
          currCode: basicFormValue?.currCode
        };
      }
    }
    return requests(`/yst-order/order/salSo/getProInfo`, {
      method: 'post',
      query: {
        ...params,
        ...param,
        orders: [{ asc: false, column: 'createTime' }]
      }
    });
  };

  /**
   * 分页查询失败回调
   * @param res
   */
  errCallBack = (res) => {
    ElNotification({
      type: 'error',
      message: res.msg || res.data || '操作失败！'
    });
  };

  render() {
    const { params } = this.props;
    return (
      <>
        <PopupSelection
          rowKey='itemId'
          modalTitle='请选择商品'
          tableProxy={{
            request: (param) => this.request(param, params),
            errCallBack: this.errCallBack,
            props: {
              success: 'success',
              result: 'data.records',
              total: 'data.total'
            },
            autoLoad: true
          }}
          // 点击搜索按钮显示的列
          modalTableColumns={modalTableColumns()}
          // input框聚焦时下拉弹框显示的列
          columns={columns()}
          searchFormProps={getTableSearchFormItems}
          needModal={true} //是否显示弹框
          onRef={this.onRef}
          value={this.props.value}
          onChange={this.props.onChange}
          overLayWidth={600}
          keywords='keyCode'
          {...this.props}
        />
      </>
    );
  }
}
export default ItemPopupSelection;
